<!--
 * @Description: 表格数据展示
 * @Author: hejianbo
 * @Date: 2022-01-14 10:02:21
 * @FilePath: /src/views/components/coms/mt-table-list/index.vue
-->
<template> 
  <el-table
    ref="tableVm"
    :data="data"
    v-bind="tStyle"
    v-on="$listeners"
    height="100%"
    :style="{ 'min-height': tStyle.minHeight }"
  >
    <template v-for="item in configData">
      <!-- 操作组 -->
      <el-table-column
        v-if="item.label == '操作'"
        :key="item.label"
        :width="item.width || tStyle.itemWidth"
        :label="item.label"
        :align="tStyle.align"
        :fixed="item.fixed ? 'right' : false"
      >
        <template slot-scope="{ row }">
          <template v-for="{ label, size, handle, formatter, disable, showFn, icon, iconFn } in item.list">
            <el-button
              v-show="showFn ? showFn(row) : true"
              type="text"
              :key="label"
              :size="size || 'small'"
              :icon="iconFn ? iconFn(row) : icon"
              :disabled="disable ? disable(row) : false"
              @click="handle(row)"
            >
              {{ formatter ? formatter(row) : label }}
            </el-button>
          </template>
        </template>
      </el-table-column>

      <!-- 单选 -->
      <el-table-column
        v-else-if="item.type == 'checkbox'"
        :key="item.label"
        :label="item.label"
        :width="item.width || tStyle.itemWidth"
      >
        <template slot-scope="{ row }">
          <input type="checkbox" :checked="row.checked" />
        </template>
      </el-table-column>

      <!-- 标签展示 -->
      <el-table-column
        v-else-if="item.tagFormatter"
        :key="item.label"
        :label="item.label"
        :align="tStyle.align"
        :width="item.width || tStyle.itemWidth"
        :min-width="item.minWidth"
      >
        <template slot-scope="{ row }">
          <template v-if="row[item.prop] !== ''">
            <template v-if="Array.isArray(row[item.prop])">
              <el-tag
                v-for="_item in row[item.prop]"
                :key="_item"
                class="mt-5"
                :type="item.tagFormatter(row[item.prop])"
                >{{ _item }}</el-tag
              >
            </template>
            <el-tag v-else :type="item.tagFormatter(row[item.prop])">
              {{ item.formatter ? item.formatter(row, null, row[item.prop]) : item.prop }}
            </el-tag>
          </template>
        </template>
      </el-table-column>

      <!-- 图片展示 -->
      <el-table-column
        v-else-if="item.tag == 'img'"
        :key="item.label"
        :label="item.label"
        :width="item.width || tStyle.itemWidth"
        :min-width="item.minWidth"
      >
        <template slot-scope="{ row }">
          <template v-if="Array.isArray(row[item.prop])">
            <mt-img-view height="100px" :src="row[item.prop][0]"></mt-img-view>
            <el-button v-if="row[item.prop].length > 1" type="text" @click="handleShowMore(row[item.prop])"
              >展示更多图片</el-button
            >
          </template>
          <template v-else>
            <mt-img-view v-if="row[item.prop]" height="100px" :src="row[item.prop]"></mt-img-view>
          </template>
        </template>
      </el-table-column>

      <!-- 纯文案展示 -->
      <el-table-column
        v-else
        :key="item.label"
        :type="item.type"
        :width="item.width || tStyle.itemWidth"
        :min-width="item.minWidth"
        :label="item.label"
        :align="tStyle.align"
        :prop="item.prop"
        :formatter="item.formatter"
        :show-overflow-tooltip="item['show-overflow-tooltip'] === false ? false : true"
        :selectable="item.selectable"
      >
      </el-table-column>
    </template>

    <el-dialog
      v-if="showMoreVisible"
      append-to-body
      title="展示更多"
      visible
      width="700px"
      @close="showMoreVisible = false"
    >
      <div class="d-flex ai-center">
        <template v-for="(item, i) in imgList">
          <mt-img-view class="ml-20" width="100px" :src="item" :key="i"></mt-img-view>
        </template>
      </div>
    </el-dialog>
  </el-table>
</template>
<script>
// import MtImgView from "@/views/components/mt-img-view";

// # 取消了向外emit on-page-change事件
// 表格默认样式
const defaultTableStyle = {
  border: false,
  stripe: true,
  minHeight: "420px",
};

export default {
  name: "mt-table-list",
  components: {
    // MtImgView,
  },
  props: {
    configData: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    tableStyle: {
      type: Object,
    },
  },
  data({ tableStyle }) {
    this.tStyle = { ...defaultTableStyle, ...tableStyle };

    return {
      showMoreVisible: false,
      imgList: [],
    };
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    toggleRowSelection(...args) {
      this.$refs.tableVm.toggleRowSelection(...args);
    },
    handleShowMore(list) {
      this.imgList = list;
      this.showMoreVisible = true;
    },
  },
};
</script>
<style scoped>
.el-button {
  margin-left: 0;
  margin-right: 10px;
}
</style>
